<template>

  <div id="id">

    <top></top>
    <Navigation></Navigation>

        <br>
        <div class="cardbox">
            <div class="cardbox_mid" style="width: 50%;margin: auto;border-radius:10px; padding: 30px;background-color: #fff;margin-bottom: 100px;">
              

              <div class="title" style="width:100%;margin-top: 30px;">
                  <template>
                      <div>
                          <transition name="el-zoom-in-bottom">
                            <div v-show="show2">
                              <template>
                         
                                  <div class="titlt_box" style="width:30%;margin: auto;">
                                      <span style="color: rgb(153, 148, 148);">待支付</span><span style="font-size: 28px;color: #2ff30c;">￥{{this.tableData.tbl_order_money}}元</span>
                                    </div>

                                  <div class="sp_box" style="width:80%;margin: auto;margin-top: 30px;margin-bottom: 10px;text-align: center;"> <span style="font-size: 18px;">{{this.tableData.tb_spname}} </span></div>

                                  <div class="sp_box" style="width:80%;margin: auto;margin-top: 30px;margin-bottom: 10px;">
                                      <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">订单编号: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tb_number}}</span> 
                                  </div>
              
                                  <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                      <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">创建时间: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tbl_order_time}}</span> 
                                  </div>
              
                                  <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                      <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">商品编号: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tb_dity_id}}</span> 
                                  </div>
                                  <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                      <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">用户邮箱: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tbl_order_user}}</span> 
                                  </div>
                                  
                                  <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                      <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">收货地址: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tbl_user_address}}</span> 
                                  </div>




                                  
                                  <div class="sp_box" style="width:80%;margin: auto;margin-top: 30px;margin-bottom: 10px;">
                                      <span style="font-size: 16px;margin-left: 80px;">支付方式: </span>
                                          <template>
                                              <el-radio-group v-model="radio">
                                                <el-radio :label="3">支付宝</el-radio>
                                                <el-radio :label="6">微信</el-radio>
                                                <el-radio :label="9">银行卡</el-radio>
                                              </el-radio-group>
                                            </template>
                                            
                                      </div>
                  
                  
                                      
                                      <div class="sp_box" style="width:80%;margin: auto;margin-top: 50px;margin-bottom: 10px;">
                                          <el-button type="success" plain style="width:40%;margin-left: 50px;"  @click="payshopping()">付款</el-button>
                                          <el-button  style="width:40%;">取消</el-button>
                                      </div>

                                </template>
                            </div>
                          </transition>
                    
           
                   
                      </div>
                    </template>


              </div>
              <div class="order_xp">
                 
              </div>


      </div>

      <el-dialog
      title="请扫码完成订单!"
      :visible.sync="dialogVisible"
       width="30%"
      :before-close="handleClose"
      
      >
     
      <div class="diabox" style="width:300px;">
         <div style="margin-left: 35%;">
        <img :src="url" alt=""></div>
      <!-- <el-result icon="success" title="支付成功!" subTitle="支付成功我们尽快发货的!"> -->
      <template slot="extra">
      <el-button type="primary" size="medium"  @click="dialogVisible = false">确定</el-button>
      </template>
     </el-result>

      </div>

</el-dialog>

  </div>

</div>
</template>

<script>
  export default {

    data() {
      return {
          radio: 3,
          tableData:[],
          dialogVisible: false,
          show2: false,
          t_email:'',
          t_id:'',
          url:'',
      }
    },
    mounted:function(){
      this.loadexecution();
  },
    methods: {


      async payshopping(){


      if(this.tableData.tbl_payment_status == 1)
      {
          this.utils.success("当前订单已付款成功! 请勿重复付款!")
          this.$router.push({path: '/userOrderPage'})
          return;

      }

       const {data:res} = await this.$http.post('person/uporderPay',this.$qs.stringify({id:this.tableData.t_id}));
        if(res.success==true){
          this.dialogVisible = true;
        }

      },

      async  loadexecution(){
         
       this.show2 = true
       this.tableData=this.$route.query
       this.t_id =this.tableData.t_id 
       this.t_email =this.tableData.tbl_order_user
       this.url = "http://localhost:8070/code/qrcode?id="+this.t_id+"+&email="+ this.t_email
       console.log("页面")
       console.log(this.$route.query)

   

      },
  




    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;}
</style>
